<template>
  <div v-if="state.files.length" class="files-frame">
    <div class="files-box">
      <File v-for="file of state.files" :key="file.id" :file="file" :deleteSelf="_deleteFile" />
    </div>
    <div class="clear-files" title="清空文件" @click="handleClearFiles">
      <DeleteIcon width="20" height="20" />
    </div>
  </div>
</template>

<script setup lang="ts" name="DialogFiles">
import File from '@/components/items/File.vue'
import useHandleFile from '@/hooks/handler/useHandleFile'
import type { LDEvents, LDStateReactive } from '@/llmDialog/types'
import { inject } from 'vue'
import DeleteIcon from '../icons/DeleteIcon.vue'

// 状态
const state = inject('state') as LDStateReactive

// 事件
const events = inject('events') as LDEvents

// 文件处理
const { deleteFile: _deleteFile, clearFiles: _clearFiles } = useHandleFile(state, events)

// 清空文件列表
const handleClearFiles = () => {
  _clearFiles()
}
</script>

<style scoped>
.files-frame {
  display: flex;
  justify-content: space-between;
}
.files-box {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-height: 100px;
  overflow: auto;
}

.clear-files {
  --size: 25px;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 var(--size);
  height: var(--size);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--ld-transition-duration);
}

.clear-files:hover {
  background-color: var(--ld-color-btn);
}
</style>
